import { View, Text } from '@tarojs/components'
import { isPaymentCompleted } from '../../utils/calculation'

export const PaymentDetails = ({ details, columns, showDetails, setShowDetails }) => {
  if (!details) return null

  // 实时计算每个计划的还款状态
  const paymentPlan = details.paymentPlan.map(plan => ({
    ...plan,
    isPaid: isPaymentCompleted(plan.paymentDate)
  }))

  return (
    <View className="bg-blue-50 rounded-lg">
      <View className="space-y-4 p-4 my-8">
        {/* 还款周期 */}
        <View className="flex items-center justify-between border-b border-blue-100 pb-2">
          <Text className="text-sm text-gray-600">还款周期</Text>
          <Text className="text-base text-gray-800">
            {paymentPlan.filter(plan => !plan.isPaid).length}/
            {paymentPlan.filter(plan => plan.isPaid).length}/{paymentPlan.length}期
          </Text>
        </View>

        {/* 总金额 */}
        <View className="flex items-center justify-between border-b border-blue-100 pb-2">
          <Text className="text-sm text-gray-600">总金额</Text>
          <View className="text-right">
            <Text className="text-base text-gray-800">
              ¥
              {paymentPlan
                .reduce((sum, plan) => sum + parseFloat(plan.payment), 0)
                .toFixed(2)}
            </Text>
            <Text className="text-xs text-gray-500">
              /
              {paymentPlan
                .reduce((sum, plan) => sum + parseFloat(plan.principal), 0)
                .toFixed(2)}
            </Text>
            <Text className="text-xs text-gray-500">
              /
              {paymentPlan
                .reduce((sum, plan) => sum + parseFloat(plan.interest), 0)
                .toFixed(2)}
            </Text>
          </View>
        </View>

        {/* 已还 */}
        <View className="flex items-center justify-between border-b border-blue-100 pb-2">
          <Text className="text-sm text-gray-600">已还</Text>
          <View className="text-right">
            <Text className="text-base text-gray-800">
              ¥
              {paymentPlan
                .filter(plan => plan.isPaid)
                .reduce((sum, plan) => sum + parseFloat(plan.payment), 0)
                .toFixed(2)}
            </Text>
            <Text className="text-xs text-gray-500">
              /
              {paymentPlan
                .filter(plan => plan.isPaid)
                .reduce((sum, plan) => sum + parseFloat(plan.principal), 0)
                .toFixed(2)}
            </Text>
            <Text className="text-xs text-gray-500">
              /
              {paymentPlan
                .filter(plan => plan.isPaid)
                .reduce((sum, plan) => sum + parseFloat(plan.interest), 0)
                .toFixed(2)}
            </Text>
          </View>
        </View>

        {/* 待还 */}
        <View className="flex items-center justify-between">
          <Text className="text-sm text-gray-600">待还</Text>
          <View className="text-right">
            <Text className="text-base text-gray-800">
              ¥
              {paymentPlan
                .filter(plan => !plan.isPaid)
                .reduce((sum, plan) => sum + parseFloat(plan.payment), 0)
                .toFixed(2)}
            </Text>
            <Text className="text-xs text-gray-500">
              /
              {paymentPlan
                .filter(plan => !plan.isPaid)
                .reduce((sum, plan) => sum + parseFloat(plan.principal), 0)
                .toFixed(2)}
            </Text>
            <Text className="text-xs text-gray-500">
              /
              {paymentPlan
                .filter(plan => !plan.isPaid)
                .reduce((sum, plan) => sum + parseFloat(plan.interest), 0)
                .toFixed(2)}
            </Text>
          </View>
        </View>
      </View>

      <View
        className="text-blue-500 text-center my-4 cursor-pointer"
        onClick={() => setShowDetails(!showDetails)}
      >
        <Text>{showDetails ? '收起明细' : '查看明细'}</Text>
      </View>

      {showDetails && paymentPlan && (
        <View className="mt-4">
          <View className="overflow-x-auto">
            <View className="min-w-[1200px]">
              <View className="grid grid-cols-7 gap-4 font-medium text-gray-600 border-b border-blue-200 pb-2">
                {columns.map(column => (
                  <Text
                    key={column.key}
                    className={`text-center ${column.width === '2' ? 'w-24' : 'w-8'}`}
                  >
                    {column.title}
                  </Text>
                ))}
              </View>
              {paymentPlan.map(plan => (
                <View
                  key={plan.period}
                  className="grid grid-cols-7 gap-4 py-2 border-b border-blue-100 text-gray-500"
                >
                  {columns.map(column => (
                    <Text
                      key={column.key}
                      className={`text-center ${
                        column.color === 'isPaid'
                          ? plan.isPaid
                            ? 'text-green-500'
                            : 'text-red-500'
                          : ''
                      } ${column.width === '2' ? 'w-24' : 'w-8'}`}
                    >
                      {column.render ? column.render(plan[column.key]) : plan[column.key]}
                    </Text>
                  ))}
                </View>
              ))}
            </View>
          </View>
        </View>
      )}
    </View>
  )
}
